<script setup lang="ts">
import {ref} from "vue";
import SvgIcon from "@/components/svg-icon/index.vue";
import {useFileInfoStore} from "@/stores/file_info";
import {useCommonStore} from "@/stores/common";

const fileInfoStore = useFileInfoStore();
const commonStore = useCommonStore()

const changeOpen = () => {
  commonStore.isOpenTaskList = !commonStore.isOpenTaskList;
}
</script>

<template>
  <div class="task-list-layout">
    <div class="task-list-header" @click="changeOpen">
      <svg-icon style="width: 20px;height: 30px" name="transmit"/>
      <p>上传任务进度</p>
      <svg-icon color="#979797" name="blow-up" size="20px"/>
      <svg-icon class="icon" color="#979797" name="close" size="20px"/>
    </div>
    <div v-if="commonStore.isOpenTaskList">
      <el-divider style="margin: 0"/>
      <div class="task-list overflowY">
        <div v-if="fileInfoStore.files.length > 0">
          <div v-for="(item,index) in fileInfoStore.files">
            <div class="task-item">
              <div class="task-item-left">
                <h3 class="file-name">{{ item.name }}</h3>
                <div style="width: 100%">
                  <el-progress
                      v-if="item.status == 2"
                      :percentage="item.fileUploadSchedule"
                      :stroke-width="9"
                      striped-flow
                  />
                </div>
                <div v-if="item.status == 0" style="display: flex;color: #409EFF;margin-top: 15px">
                  <svg-icon color="#E3A03E" name="await"/>
                  <p>正在等待上传中</p>
                </div>
                <div v-if="item.status == 1" style="display: flex;color: #E3A03E;margin-top: 15px">
                  <svg-icon color="#E3A03E" name="time"/>
                  <p>正在解析中</p>
                </div>
                <div v-else-if="item.status == 2" style="display: flex;color: #409EFF;margin-top: 15px">
                  <svg-icon color="#409EFF" name="upload_icon1"/>
                  <p>正在上传中</p>
                </div>
                <div v-else-if="item.status == 3" style="display: flex;color: #52C41A;margin-top: 15px">
                  <svg-icon color="#52C41A" name="yes"/>
                  <p>上传成功</p>
                </div>
                <div v-else-if="item.status == 4" style="display: flex;color: #F56C6C;margin-top: 15px">
                  <svg-icon color="#F56C6C" name="no"/>
                  <p>上传成功失败</p>
                </div>
              </div>
              <div class="menu-item">
                <el-progress v-if="item.status == 1" :height="50" :width="50" :duration="1" :stroke-width="4"
                             type="circle"
                             :percentage="item.analyzeSchedule"/>
                <div v-if="item.status == 2" style="display: flex;gap: 10px">
                  <div class="icon-item">
                    <svg-icon style="width: 20px;height: 20px" name="start"/>
                  </div>
                  <div class="icon-item">
                    <svg-icon style="width: 20px;height: 20px" :color="'#409EFF'" name="close"/>
                  </div>
                </div>
              </div>
            </div>
            <el-divider style="margin: 5px"/>
          </div>
        </div>
        <div v-else class="empty">
          <svg-icon style="width: 300px;height: 300px" name="task"/>
          <p>暂无上传任务</p>
        </div>
      </div>
      <el-divider style="margin: 0"/>
      <div class="task-bar" @click="changeOpen">
        收起
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.task-list-layout {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: $task_list_wight;

  .task-list {
    min-height: 450px;
    max-height: 450px;
    background-color: #FAFAFA;

    .empty {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      p {
        margin-top: 30px;
        user-select: none;
      }
    }

    .task-item {
      display: flex;
      padding: 15px 20px;
      align-items: center;
      width: $task_list_wight;

      .icon-item {
        padding: 5px;
        border-radius: 50px;
        background-color: #ddf0f6;
      }

      .task-item-left {
        flex: 1;
        display: flex;
        flex-direction: column;

        .file-name {
          width: 280px;
          margin-bottom: 10px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

      }

      .menu-item {
        width: 60px;
      }

    }

  }

  .task-bar {
    padding: 15px;
    text-align: center;
    color: #409EFF;
    cursor: pointer;
  }

  .task-list-header {
    padding: 0 15px;
    gap: 10px;
    height: 50px;
    display: flex;
    align-items: center;

    .icon {
      width: 30px;
      height: 30px;
    }

    p {
      font-weight: 600;
      flex: 1;
    }

  }

  .task-list-header:hover {
    background-color: #F0F2F5;
  }

}
</style>